<template>
  <div class="container">
    <div
      class="link-container"
      :style="{ backgroundImage: 'url(' + tagsConfig.bgcImgUrl + ')' }"
      @click="linkTo"
    >
      <div class="container-content">
        <van-image width="60" height="60" fit="contain" :src="tagsConfig.iconUrl" radius="13" />
        <div class="content-right">
          <div>
            {{ tagsConfig.title }}
            <van-icon name="arrow" />
          </div>
          <div>
            <span class="tag-span" v-for="item in tagsConfig.tagsTitle">{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue"

let props = defineProps({
  tagsConfig: Object
})

const linkTo = () => {
  console.log('后续制作跳转到社区');
}
</script>

<style scoped>
.container {
  background-color: #fff;
}
.link-container {
  height: 80px;
  border-bottom: 1px solid #ebedf0;
  margin: 0 10px;
  background-size: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.container-content {
  width: 100%;
  height: 60px;
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.content-right {
  width: 100%;
  height: 50px;
  font-size: 16px;
  color: #fff;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tag-span {
  font-size: 12px;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  margin-right: 5px;
}
</style>
